<template>
    <div style="display: flex; flex-direction: column">
        <a-input-search
                style="width: 80%; align-self: center; margin-bottom: 32px"
                v-model:value="value"
                placeholder="请输入问题"
                :loading="loading"
                enter-button
                allow-clear
                @search="handleSearch"
        />
        <a-spin :spinning="loading">
            <div class="content">
                {{answer}}
            </div>
        </a-spin>
    </div>
</template>

<script>
import {question} from "../service.js";

export default {
    name: "FAQ",
    data() {
        return {
            loading: false,
            value: '',
            answer: '',
        };
    },
    methods: {
        async handleSearch() {
            if (!this.value) return;
            this.answer = await question({
                question: this.value,
            });
        }
    }
}
</script>

<style scoped>
.content {
    padding: 12px 24px;
    border-radius: 3px;
    border: 1px solid #dedede;
    min-height: 30vh;
    white-space: pre-wrap;
    overflow-y: auto;
}
</style>